<template>

    <div :class="propJson.editFlag ? 'editContainer' : 'commonContainer'" :style="execPositionStyle" :info="execAffixShow">
        <div class="commonDiv" :style="execStyle" v-if="!propJson.editFlag && affixShowFlag" :info="getBadgeValue">
            <el-card shadow="hover" :body-style="execBodyClass" v-for="item in propJson.affixList" :key="item.buttonName" @click="affixClick(item)">
                <div style="text-align: center">
                    <el-badge :value="item.value" :is-dot="item.badgeIsBot" :max="item.badgeMaxNum"
                              :type="item.badgeType" v-if="item.isAddBadge">
                        <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize"></el-button>
                    </el-badge>
                    <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize" v-if="!item.isAddBadge"></el-button>
                </div>
                <div style="text-align: center">
                    <span :style="execAffixNameStyle" style="caret-color: transparent;">{{item.affixName}}</span>
                </div>
            </el-card>
        </div>

        <div class="editDiv" :style="execStyle" v-if="propJson.editFlag" :info="getBadgeValue">
            <el-card :body-style="execBodyClass" v-for="item in propJson.affixList" :key="item.buttonName">
                <div style="text-align: center">
                    <el-badge :value="item.value" :is-dot="item.badgeIsBot" :max="item.badgeMaxNum"
                              :type="item.badgeType" v-if="item.isAddBadge">
                        <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize"></el-button>
                    </el-badge>
                    <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize" v-if="!item.isAddBadge"></el-button>
                </div>
                <div style="text-align: center">
                    <span :style="execAffixNameStyle">{{item.affixName}}</span>
                </div>
            </el-card>
        </div>
    </div>

</template>

<script>
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";

export default {
    name: "AffixComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            affixShowFlag: true
        }
    },
    methods: {
        execAffixShowThen(resValue) {
            if (typeof resValue === "string") {
                this.affixShowFlag = resValue === 'true';
            } else {
                this.affixShowFlag = !!resValue;
            }
        },
        execAffixShowCatch(resValue) {

        },
        execChangeThen(awaitObj) {

        },
        async affixClick(item) {
            if (!item.affixAction) {
                return;
            }
            // 定义一个标志位，后续同步执行
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(item.affixAction, awaitObj, this.commonParam, this.execChangeThen, ()=>{}, awaitObj);
        },
        execBadgeValueThen(resValue, item) {
            item.value = resValue
        },
        execBadgeValueCatch(resValue) {

        }
    },
    computed: {
        execStyle() {
            let style = "";
            style += "width: " + this.propJson.affixWidth + ";";
            return style;
        },
        execAffixNameStyle() {
            let style = "";
            style += "font-size: " + this.propJson.affixNameSize;

            return style;
        },
        execPositionStyle() {
            let style = "";
            if (this.propJson.positionType === 'rightBottom') {
                style += "right: " + this.propJson.positionRight + ";";
                style += "bottom: " + this.propJson.positionBottom + ";";
            } else if (this.propJson.positionType === 'rightTop') {
                style += "right: " + this.propJson.positionRight + ";";
                style += "top: " + this.propJson.positionTop + ";";
            } else if (this.propJson.positionType === 'leftBottom') {
                style += "left: " + this.propJson.positionLeft + ";";
                style += "bottom: " + this.propJson.positionBottom + ";";
            } else if (this.propJson.positionType === 'leftTop') {
                style += "left: " + this.propJson.positionLeft + ";";
                style += "top: " + this.propJson.positionTop + ";";
            }
            return style;
        },
        execBodyClass() {
            let style = "";
            style += "padding: 0;";
            if (this.propJson.cardPaddingTop !== '') {
                style += "padding-top: " + this.propJson.cardPaddingTop + ";";
            }
            if (this.propJson.cardPaddingBottom !== '') {
                style += "padding-bottom: " + this.propJson.cardPaddingBottom + ";";
            }
            return style
        },
        async execAffixShow() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.affixShow, this.commonParam, this.execAffixShowThen, this.execAffixShowCatch, null)
        },
        async getBadgeValue() {
            if (this.propJson.editFlag) {
                return;
            }
            for (let index = 0; index < this.propJson.affixList.length; index++) {
                let item = this.propJson.affixList[index];
                await doThirdServiceValue(item.badgeValue, this.commonParam, this.execBadgeValueThen, this.execBadgeValueCatch, item)
            }
        }
    }
}
</script>

<style scoped lang="less">
.commonContainer {
    position: fixed;
}

.editContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commonDiv:hover {
    cursor: pointer;
}

</style>